import {Environment, OrbitControls} from '@react-three/drei'
import {GreenMan} from './GreenMan.jsx'
import {Orun} from './Orun.jsx'
import {useGame} from '../hooks/useGame.jsx'
import {AREA_BOARD_LENGTH, GREEN_COL_SPACE, GREEN_COLS, GREEN_ROW_SPACE} from '../App.jsx'
import {AreaBoard} from './AreaBoard.jsx'
import {GameOver} from './GameOver.jsx'
import {degToRad} from 'three/src/math/MathUtils.js'
// import {Zombie} from './Zombie.jsx'
// import {ZombieErr} from './ZombieErr.jsx'
// import {ZombieRun} from './ZombieRun.jsx'
// import {ZombieRunErr} from './ZombieRunErr.jsx'

export const Experience = () => {

  const {greenMen, status} = useGame()

  return (
    <>
      <OrbitControls/>
      {/* 材质生效 */}
      <Environment preset="sunset"/>

      <GameOver
        position-y={-4}
        rotation-x={degToRad(-20)}
        visible={status === 'gameover'}
      />

      <group visible={status === 'playing'}>
        <AreaBoard/>
        <AreaBoard position-z={AREA_BOARD_LENGTH}/>
        <AreaBoard position-z={-AREA_BOARD_LENGTH}/>

        {
          greenMen.map((greenItem, ix) => {
            const col = ix % GREEN_COLS
            const row = Math.floor(ix / GREEN_COLS)
            // const x = col * GREEN_COL_SPACE
            const x = col * GREEN_COL_SPACE - (GREEN_COLS - 1) * GREEN_COL_SPACE / 2
            const y = row * GREEN_ROW_SPACE
            return (
              <group key={ix} position-x={x} position-z={-1 - y}>
                <GreenMan greenItem={greenItem}/>
              </group>
            )
          })
        }
        {/* <GreenMan position-z={-1}/> */}

        {/* <ZombieRun position-z={6}/> */}
        {/* <ZombieErr position-z={6}/> */}
        {/* <Zombie /> */}
        <Orun position-z={6}/>
      </group>
    </>
  )
}
